<!-- 首页 -->
<template>
	<view class="home" style="padding-bottom:30rpx;">
		<!-- 
			下面judgePlatform判断平台是否为H5
			H5平台直接使用默认标头，小程序使用自定义表头
			动态计算右上角胶囊的距离，自定义样式
		 -->
		<view v-if="!judgePlatform" class="head" :style="{ height:(topHeight.statusBarHeight+44)+'px'}">
			<view class="head_content" :style="{height:menuHeight.height+'px',minHeight:menuHeight.height+'px',
			lineHeight:menuHeight.height+'px',
			bottom:(menuHeight.top-topHeight.statusBarHeight)+'px'}">
				<view style="margin-left: 32rpx;margin-right: -32rpx;"></view>
				<!-- 下面注释掉的是抽屉栏，暂无原型 -->
				<!-- <u-icon @click="$refs.drawer.open()" style="margin-left: 32rpx;margin-right: -32rpx;" name="list" size="40"></u-icon> -->
				<text>膜品科技官网号</text>
				<text style="width: 32rpx;height: 32rpx;"></text>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="page1">
			<!-- 质保查询和膜品商城都抽离到了这个组件中 -->
			<Carousel :banner="banner"/>
		</view>
		
		<view class="page2">
			<!-- 品牌爆款 -->
			<Brand :brandList="brandList">
				<LabelLength :label="brandLabel"/>
			</Brand>
			<!-- 授权门店 -->
			<Store :latitude="latitude" :longitude="longitude" :shopList="shopList">
				<LabelLength :label="storeLabel"/>
			</Store>
			<!-- 膜品应用 -->
			<Film :filmList="filmList">
				<LabelLength :label="filmLabel"/>
			</Film>
			<!-- 动态推荐 -->
			<Recommendation :recommendationList="recommendationList">
				<LabelLength :label="recommendationLabel"/>
			</Recommendation>
		</view>
		<!-- 底部导航栏 -->
		<u-tabbar v-show="!isTabBarHidden" class="tab_bar" v-model="nav_current" :list="nav_list" active-color='#2C2C2C' height="100"></u-tabbar>
		<!-- 抽屉 -->
		<uni-drawer :width="150" ref="drawer" mode="left" :mask-click="true">
			<scroll-view style="height: 100%;" scroll-y="true">
				<view class="">
					123
					<!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权获取</button>
					<u-button
						open-type="getUserInfo"
						@getuserinfo="getUserInfo"
					>123</u-button> -->
				</view>
			</scroll-view>
		</uni-drawer>
	</view>
</template>

<script>
	import LabelLength from './components/label.vue';
	import Carousel from './components/carousel.vue';
	import Brand from './components/brand.vue';
	import Store from './components/store.vue';
	import Film from './components/film.vue';
	import Recommendation from './components/recommendation.vue';
	export default {
		components:{ LabelLength,Carousel,Brand,Store,Film,Recommendation },
		data() {
			return {
				showDrawer: false,//左上角的抽屉按钮
				latitude:0,// 纬度
				longitude:0,// 经度
				topHeight: uni.getSystemInfoSync(),
				menuHeight:uni.getMenuButtonBoundingClientRect(),
				nav_list: [{
						pagePath: "/pages/index/index",
						iconPath: "/static/death/nav/home.png",
						selectedIconPath: "/static/death/nav/home-selected.png",
						text: '首页'
					},
					{
						pagePath: "/pages/car/case",
						iconPath: "/static/death/nav/case.png",
						selectedIconPath: "/static/death/nav/case-selected.png",
						text: '案例'
					},
					{
						pagePath: "/pages/car/quote",
						iconPath: "/static/death/nav/price.png",
						selectedIconPath: "/static/death/nav/price-selected.png",
						text: '报价'
					},
					{
						pagePath: "/pages/product/product",
						iconPath: "/static/death/nav/brand.png",
						selectedIconPath: "/static/death/nav/brand-selected.png",
						text: '品牌'
					},
					{
						pagePath: "/pages/my/my",
						iconPath: "/static/death/nav/mine.png",
						selectedIconPath: "/static/death/nav/mine-selected.png",
						text: '我的'
					},
				], // 底部导航
				nav_current: 1,
				banner: [], //轮播图
				isTabBarHidden: false, //底部导航栏隐藏条件
				brandList:[],//品牌列表
				// 新品label
				brandLabel:{
					zhTitle:"品牌爆款",//中文标题
					enTitle:"BRAND EXPLOSION",//英文标题
					more:"新品上市",//更多字样
					tapPath:'/pages/car/newCase'//更多跳转
				},
				// 授权门店label
				storeLabel:{
					zhTitle:"授权门店",//中文标题
					enTitle:"AUTHORIZED STORES",//英文标题
					more:"更多",//更多字样
					tapPath:'/pages/search/shop'//更多跳转
				},
				// 膜品应用label
				filmLabel:{
					zhTitle:"膜品应用",//中文标题
					enTitle:"FILM PRODUCTS",//英文标题
					more:"更多",//更多字样
					tapPath:'/pages/product/new-product?type=1'//更多跳转
				},
				//授权门店列表
				shopList:[],
				//膜品应用列表
				filmList:[],
				// 动态推荐label
				recommendationLabel:{
					zhTitle:"动态推荐",//中文标题
					enTitle:"DYNAMIC RECOMMENDATION",//英文标题
					more:"更多",//更多字样
					tapPath:'/pages/dynamic/dynamic'//更多跳转
				},
				//动态推荐列表
				recommendationList:[],
				scrollTop:0,//用于判断页面滚动方向的
				isBottom:false//页面是否滚动到底
			}
		},
		computed:{
			isLogin(){
				return this.vuex_token != null && this.vuex_token != '';
			},
			// 平台判断
			judgePlatform(){
				return uni.getSystemInfoSync().uniPlatform == 'web';
			}
		},
		async onLoad() {
			// 获取首页数据
			this.getIndexData();
			// 隐藏原有tabBar
			// uni.hideTabBar();
		},
		
		onPageScroll(e) {
			// 判断上滚出现tabBar，下滚隐藏
			// if(this.isBottom){
			// 	this.isBottom = false;
			// 	return;
			// }
			// this.isTabBarHidden = e.scrollTop - this.scrollTop > 0;
			// this.scrollTop = e.scrollTop;
		},
		// 滚动到底
		onReachBottom(e){
			// this.isBottom = true;
		},
		
		onShareAppMessage: function( options ){
		　　var that = this;
		　　// 设置菜单中的转发按钮触发转发事件时的转发内容
		　　var shareObj = {
		　　　　title: "膜品科技",        // 默认是小程序的名称(可以写slogan等)
		// 　　　　path: '/pages/share/share',        // 默认是当前页面，必须是以‘/’开头的完整路径
		// 　　　　imageUrl: '',     //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
		　　　　success: function(res){
		　　　　　　// 转发成功之后的回调
		　　　　　　if(res.errMsg == 'shareAppMessage:ok'){
		　　　　　　}
		　　　　},
		　　　　fail: function(){
		　　　　　　// 转发失败之后的回调
		　　　　　　if(res.errMsg == 'shareAppMessage:fail cancel'){
		　　　　　　　　// 用户取消转发
		　　　　　　}else if(res.errMsg == 'shareAppMessage:fail'){
		　　　　　　　　// 转发失败，其中 detail message 为详细失败信息
		　　　　　　}
		　　　　},
		　　　　complete: function(){
		　　　　　　// 转发结束之后的回调（转发成不成功都会执行）
		　　　　}
		　　};
		　　// 来自页面内的按钮的转发
		　　if( options.from == 'button' ){
		// 　　　　var eData = options.target.dataset;
		// 　　　　console.log( eData.name );     // shareBtn
		// 　　　　// 此处可以修改 shareObj 中的内容
		// 　　　　shareObj.path = '/pages/btnname/btnname?btn_name='+eData.name;
		　　}
		　　// 返回shareObj
		　　return shareObj;
		},
		onShareTimeline() {
			return {
				title: '膜品科技'
			}
		},
		methods: {
			// 获取首页数据
			async getIndexData(){
				try{
					//获取首页数据
					// 轮播图
					let bannerRes = await this.$api.getRotationImg();
					// 获取坐标
					let that = this;
					await uni.getLocation({type: 'wgs84',
						async success(res) {
						    that.latitude = res.latitude;
							that.longitude = res.longitude;
							// 授权门店
							let shopRes = await that.$api.getListByDistance({
								latitude:res.latitude,
								longitude:res.longitude,
							});
							if(!shopRes?.success) return;
							that.shopList = shopRes.result;
						}
					});
					// 膜品应用
					let filmRes = await this.$api.getCarProduct();
					// 品牌爆款
					let brandRes = await this.$api.getNewList();
					// 动态推荐
					let recommendationRes = await this.$api.carInformation({pageNo:1,pageSize:3});
					
					if(!bannerRes?.success) return;
					this.banner = bannerRes.result;
					
					if(!filmRes?.success) return;
					this.filmList = filmRes.result.records;
					
					if(!brandRes?.success) return;
					this.brandList = brandRes.result.records;
					
					if(!recommendationRes?.success) return;
					this.recommendationList = recommendationRes.result.records;
					
				}catch(e){
					uni.showToast({title:"数据获取失败！",icon:"error"})
				}
			},
			// 关闭抽屉
			closeDrawer(){
				this.$refs.drawer.close();
			}
		},
	}
</script>

<style>
	page{
		background-color: #1C1C1C;
	}
</style>

<style lang="scss" scoped>
.page2{
	padding-left: 30rpx;
	padding-right: 30rpx;
	margin-top: 70rpx;
}
.head{
	position: fixed;
	z-index: 100;
	font-size: 36rpx;
	color: #fff;
	width: 100%;
	.head_content{
		position: absolute;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}
/deep/.u-swiper-indicator {
	margin-bottom: 258rpx;
}
</style>